<template>
    <div>
        <!-- 顶部导航条 -->
        <van-nav-bar fixed placeholder  style="height: 50px;">
            <template #left>
                <van-tabs v-model="active" @change="articleChange">
                    <van-tab title="推荐">
                        
                    </van-tab>
                    <van-tab title="最新"></van-tab>
                </van-tabs>
            </template>
            <template #right> <span class="article-logo">面经</span> </template>
        </van-nav-bar>
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <articleItem v-for="item in articleList" :article="item" :key="item.id"></articleItem>
            </van-list>
    </div>
</template>

<script>
import { getArticleList } from "@/api/article";
import articleItem from '@/components/articleItem.vue'
export default {

    data() {
        return {
            active: 0,
            list: [],
            loading: false,
            finished: false,
            current:1,
            articleList:[]
        }
    },
    created(){
        this.loadArticleList()
    },
    methods: {
        
        articleChange() {
            this.current = 1;
            this.loadArticleList();
           
        },
        // 触底加载onload 当finished为为True时 不加载onload  loading 是否处于加载状态，加载过程中不触发load事件
        onLoad() {
        // 异步更新数据
            this.current++
            this.loadArticleList()
        },
        async loadArticleList() {
            // 调用接口
            const res = await getArticleList({
                // 要加载第几页的数据
                current: this.current,
                // 排序
                // active如果为0，就是推荐，否则就是最新
                sorter: this.active === 0 ? "weight_desc" : "",
            });
            //判断是否为第一页，是则默认 ，不是则需要拼接
            this.current === 1 ? this.articleList = res.data.data.rows : this.articleList = [...this.articleList, ...res.data.data.rows]
            // 判断是否还有更多数据
            //判断是否有更多数据
            this.finished = this.current >= res.data.data.pageTotal
            //关闭加载中
            this.loading = false
        },

    },
    components:{
        articleItem,
    }
}
</script>

<style lang="scss" scoped>
.article-logo {
    font-size: 40px;
    color: #fa6d1d;
    font-weight: 900;
}

</style>